<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../style/fjol_style.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../style/xol_style.css"/>
	</head>

	<body>
		    <div id="pullrefresh" class="mui-scroll-wrapper">
		        <div class="mui-scroll">
		            <!--这里放置真实显示的DOM内容-->
		            <div id="mortgageList">
		            	
			    	</div>
		        </div>
		    
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/md5.js"></script>
		<script src="../js/common.util.js"></script>
		<script src="../js/network.js"></script>
		<script src="../js/jquery-2.1.0.js"></script>
		<script src="../js/jquery.tmpl.min.js"></script>
		<!--<script src="../js/fj_public_js.js"></script>-->
		<script id="mortgageTmpl" type="text/x-jquery-tmpl">
			<div class="flex pt10" id="${id}">
	            <div class="p10" style="width: 100%;">
	            	
	            	<button type="button" class="mui-btn mui-btn-red mui-btn-outlined mr5 mb5 p5">${city}</button>
					
					<button type="button" class="mui-btn mui-btn-red mui-btn-outlined mr5 mb5 p5">${area?area:'泉州'}</button>
					
					<button type="button" class="mui-btn mui-btn-red mui-btn-outlined mr5 mb5 p5">
						{{if beginTotalPrice}}
							{{if endTotalPrice}}
								${$item.getTruedata(beginTotalPrice,endTotalPrice)}
							{{else}}
								${$item.getTruedata(beginTotalPrice,0)}
							{{/if}}
						{{else}}
							{{if endTotalPrice}}
								${$item.getTruedata(0,endTotalPrice)}
							{{else}}
								${$item.getTruedata(0,0)}
							{{/if}}
						{{/if}}
						万</button>
					
					<button type="button" class="mui-btn mui-btn-red mui-btn-outlined mr5 mb5 p5">${bedRoomNumber}室</button>
					
					<button type="button" class="mui-btn mui-btn-red mui-btn-outlined mr5 mb5 p5">${houseTypeName}</button>
					
					<button type="button" class="mui-btn mui-btn-red mui-btn-outlined mr5 mb5 p5">${decorationTypeName}</button>
					
					<button type="button" class="mui-btn mui-btn-red mui-btn-outlined mr5 mb5 p5">
						{{if beginSquare}}
							{{if endTotalSquare}}
								${$item.getTruedata(beginSquare,endTotalSquare)}
							{{else}}
								${$item.getTruedata(beginSquare,0)}
							{{/if}}
						{{else}}
							{{if endTotalSquare}}
								${$item.getTruedata(0,endTotalSquare)}
							{{else}}
								${$item.getTruedata(0,0)}
							{{/if}}
						{{/if}}
						平方</button>
					
					<button type="button" class="mui-btn mui-btn-red mui-btn-outlined mr5 mb5 p5">
						
						{{if beginPrice}}
							{{if endTotalPrice}}
								${$item.getTruedata(beginPrice,endTotalPrice)}
							{{else}}
								${$item.getTruedata(beginPrice,0)}
							{{/if}}
						{{else}}
							{{if endTotalPrice}}
								${$item.getTruedata(0,endTotalPrice)}
							{{else}}
								${$item.getTruedata(0,0)}
							{{/if}}
						{{/if}}
						万</button>
					
					<button type="button" class="mui-btn mui-btn-red mui-btn-outlined mr5 mb5 p5">
						
						{{if beginHouseYear}}
							{{if endHouseYear}}
								${$item.getTruedata(beginHouseYear,endHouseYear)}
							{{else}}
								${$item.getTruedata(beginHouseYear,0)}
							{{/if}}
						{{else}}
							{{if endHouseYear}}
								${$item.getTruedata(0,endHouseYear)}
							{{else}}
								${$item.getTruedata(0,0)}
							{{/if}}
						{{/if}}
						年房龄</button>
					
	            </div>
	            <span type="button" class="flexcell color9 p5 removeMortgage" style="width: 80px;">取消订阅</span>
        </div>
        <div class="bg-white pt5">

    	        {{if subscriptionList.length==0}}
    	        <div class="mui-text-center">
    	        	<img class="mui-media-object" src="../images/icon_blank@2x.png" width="20%">
    	        	<p>暂时没有相关房源</p>
    	        </div>
    	        {{else}}
    	        <span class="mui-badge mui-badge-inverted mui-btn-red mui-pull-right moreMortgageHouse f08" style="line-height: 20px;">更多房源&gt;</span>

	    	    <ul class="mortgage-ul p0 bg-white" style="height: 210px; padding-left: 0; overflow: hidden; width: 100%;">
	    	    	
	    	        {{each(i,subList) subscriptionList}}
					<li class="mui-control-item mui-text-left tuijian-list" id="${i+1}:{{= subList.id}}">
			        	<a href="#">
			            <img class="mui-media-object" src="${i+1}:{{= subList.coverImage}}">
			            <div class="" style="white-space: normal;">
			            	<span>${i+1}:{{= subList.title}}</span>
			            	<p style="margin: 0;">${i+1}:${$item.setHousebuildDate()}年/{{= subList.square}}平/{{= subList.decorationTypeName}}</p>
			            	<span class="mui-badge mui-badge-warning mui-badge-inverted">${i+1}:{{= subList.totalPrice}}万</span>
			            </div>
			            </a>
			        </li>
			        {{/each}}
	    	    </ul>
    	        {{/if}}
        </div>
	            

		</script>
		
		<script type="text/javascript">
//			mui.init();
			mui.init({
				pullRefresh : {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: {
//						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			var pagevalue = 1;
			function pulldownRefresh(){
				setTimeout(function() {
//				 	console.log(pagevalue);
					$('.mui-pull').hide();
					getNetwork(1,10,true);
				 	mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
				 	mui('#pullrefresh').pullRefresh().enablePullupToRefresh();
					return pagevalue = 1;
				 },1000);
			}
			function pullupRefresh(){
//				console.log(pagevalue);
					$('.mui-pull').show();
				setTimeout(function() {
				pagevalue++;
				getNetwork(pagevalue,10,false);
//				mui('#pullrefresh').pullRefresh().endPullupToRefresh();
				},1000);
			}
			mui.plusReady(function(){
				getNetwork(1,10,false);
				mui('#mortgageList').on('tap','.removeMortgage',function(){	//取消订阅
					var parentNode = $(this).closest('.mui-clearfix');
					mui.confirm('确定要取消该订阅吗？','提示',['取消订阅','再想想'],function(e){
						if(e.index == 0){
//							console.log(parentNode.attr('class'));
							var parentId = parentNode.attr('id');
							var param = [{
								key:'id',
								value:parentId
							}];
							fjNetwork.post('fjzx/client/delete-subscription-house.json',param,function(data){
//								console.log(JSON.stringify(data));
								mui.toast(data.msg);
								getNetwork(1,10,true);
							},function(msg){
								mui.toast(msg);
							})
						}
					});
					
				});
				
				mui('#mortgageList').on('tap','.moreMortgageHouse',function(){	//查看更多订阅房源
//					var moreDiv = document.createElement('div');
					var ul = this.nextElementSibling;
					var prevDiv = this.parentNode.previousElementSibling.childNodes[3];
//					console.log(prevDiv.classList);
					
//					moreDiv.innerHTML = ul.innerHTML;
					mui.openWindowWithTitle({
						url:'mortgage_sub_more.html',
						id:'mortgage_sub_more',
						extras:{
							btnInnerHtml:prevDiv.innerHTML,
							divInnerHtml:ul.innerHTML
						}
					},{
						title:{
							text:'订阅房源更多'
						},
						back:{//左上角返回箭头
					        image:{
					            base64Data:''
					        }
					       }
					})
				});
			});
			function getNetwork(pagevalue,rowsvalue,isTrue){
				var userInfo = common.myStorage.getItem('userInfo');
				var param = [{
					key:'clientId',
					value:userInfo.clientId
				},{
					key:'page',
					value:pagevalue
				},{
					key:'rows',
					value:rowsvalue
				}];
				
				
				fjNetwork.get('fjzx/client/house-subscription-list.json',param,function(data){
//					console.log(JSON.stringify(data));
					var rows = data.rows;
					var subscriptionList = rows.subscriptionList;
					if(isTrue){
						document.querySelector('#mortgageList').innerHTML = '';
					}
					if(rows.length == 0 && pagevalue==1) {
							var _li = document.createElement('div');
							_li.className = 'mui-control-item mui-text-center';
							_li.innerHTML = '<img src="../images/icon_blank.png"/>';
							document.getElementById('mortgageList').insertBefore(_li,null);
						}else{
							$('#mortgageTmpl').tmpl(rows,{
						getTruedata:function(beginData,endData){
							
							return beginData+'-'+endData;
						},
						setHousebuildDate:function(){
							var buildDate = this.data.subscriptionList.buildDate;
							var buildDatetime = new Date(buildDate).toLocaleString();
							var buildtimer = buildtime.split('-')[0];
							return buildtimer;
						}
					}).appendTo('#mortgageList');
						}
					
						mui('#pullrefresh').pullRefresh().endPullupToRefresh(rows.length==0);
					
					 
				},function(msg){
					console.log(msg);
				});
				
			}
			Date.prototype.toLocaleString = function() {
	          return this.getFullYear() + "-" + (this.getMonth() + 1) + "-" + this.getDate() + ", " + this.getHours() + ":" + this.getMinutes() + ":" + this.getSeconds();
	    };
		</script>
	</body>

</html>